NaN

html5新增标签

(1) 语义化结构标签

最常用语义标签

  1. header 头部标签
  2. footer 底部标签
  3. nav 导航标签
  4. aside 侧边栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>头部</header>
    <nav>导航栏</nav>
    <aside>侧边栏</aside> <div>主体</div>
    <footer>d底部</footer>
</body>
</html>

其他语义化标签

<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

<details>
    <summary>文章列表</summary>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
</details>
<dialog open>温馨提示: 你已进入监控区域</dialog>
<progress max="100" min="1" value="50"></progress>

(2) 多媒体标签 

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

audio 和 video 标签

<!-- audio标签 -->
<!DOCTYPE HTML>
<html>
<body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

<!-- video 标签 -->
<!DOCTYPE HTML>
<html>
<body>
    <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
        your browser does not support the video tag
    </video>
</body>
</html>

(3) 新的 Input 类型

  1. number
  2. tel
  3. date
  4. color
  5. datetime
  6. datetime-local
  7. email
  8. month
  9. range
  10. search
  11. time
  12. url
  13. week
<!DOCTYPE HTML>
<html>
<body>
     <input type="number">  <br><br>
     <input type="tel">  <br><br>
     <input type="date">  <br><br>
     <input type="color">  <br><br>
     <input type="datetime">  <br><br>
     <input type="datetime-local">  <br><br>
     <input type="email">  <br><br>
     <input type="month">  <br><br>
     <input type="range">  <br><br>
     <input type="search">  <br><br>
     <input type="time">  <br><br>
     <input type="url">  <br><br>
     <input type="week">   <br><br>
</body>
</html>

(4) canvas画布

先了解一下

<!DOCTYPE HTML>
<html>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
  </canvas>
  
  <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(10, 10);
    cxt.lineTo(150, 50);
    cxt.lineTo(10, 50);
    cxt.stroke();
  </script>
</body>
</html>